// 背景颜色
$bgc: #ebebeb;
$bgc-off: #f7f7f7;

// 边框颜色
$bdc: #d9d9d9;
$bdc-off: #dddee1;

// 字体颜色
$fc: #353535;
$fc-t: #717171;
$fc-on: #448aff;
$fc-off: #bbbec4;

// 字体大小
$fsl: 32rpx;
$fsm: 28rpx;
$fss: 24rpx;

// 边距
$pd: 40rpx;

view {
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #fff;
  font-size: $fsm;
}

// 混合器使用@mixin标识符定义
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 给混合器传参
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
.link-color {
  @include link-colors(blue, red, green);
}

// input获取焦点下划线动态效果
@mixin focused($off, $on) {
  position: relative;

  &::before, &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rpx;
    will-change: border,opacity,transform;
    content: '';
  }

  &::before {
    z-index: 1;
    background-color: $off;
  }

  &::after {
    z-index: 2;
    opacity: 0;
    transform: scaleX(.12);
  }

  &.on::after {
    opacity: 1;
    transform: scaleX(1);
    transition: .3s cubic-bezier(.4,0,.2,1);
    transition-property: border,opacity,-webkit-transform;
    transition-property: border,opacity,transform;
    transition-property: border,opacity,transform,-webkit-transform;
    background-color: $on;
  }
}

// button禁止样式
@mixin button {
  &.off {
    background-color: $bgc-off;
    border-color: $bdc-off;
    color: $fc-off;
  }
}

// 空数据
.data-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $pd;
  background-color: #fff;

  .icon-empty {
    display: block;
    width: 400rpx;
    height: 400rpx;
  }
}

.nomore {
  width: 100%;
  padding-top: $pd;
  text-align: center;
  color: $fc-off;
}